<template>
    <el-select
        v-model="value"
        :disabled="disabled"
        :size="size"
        :multiple="multiple"
        style="width: 100%;"
        @change="handleChange"
    >
        <el-option :label="$t('common.text.all')" value v-if="showAll" />
        <el-option
            v-for="item in gradeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        ></el-option>
    </el-select>
</template>
<script>
/**
 * 年级下拉框组件
 */
export default {
    name: 'SchoolYear',
    props: {
        value: {
            required: true
        },
        disabled: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: ''
        },
        multiple: {
            type: Boolean,
            default: false
        },
        showAll: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            gradeList: []
        }
    },
    mounted() {
        this.init()
    },
    created() {
        if (this.multiple && !Array.isArray(this.value)) {
            this.$emit('input', [])
        }
        if (!this.multiple && Array.isArray(this.value)) {
            this.$emit('input', '')
        }
    },
    methods: {
        handleChange(val) {
            this.$emit('input', this.value)
            this.$emit('change', val)
        },
        init() {
            let fullYear = new Date().getFullYear() + 5
            for (let i = 10; i > 0; i--) {
                var schoolYear = fullYear - i + '-' + (fullYear - i + 1) + '学年'
                this.gradeList.push({ value: fullYear - i, label: schoolYear })
            }
        }
    }
}
</script>

<style scoped>
</style>
